<template>
  <el-dialog :model-value="teacherVisible" :close-on-press-escape="false" :show-close="false"
    width="600" title="老师管理" @close="handleCurrentChange">
    <el-form :model="listForm">
      <el-row :gutter="24">
        <el-col :span="20">
          <el-form-item label="老师姓名">
            <el-input v-model="listForm.keyword" placeholder="请输入老师姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="searchFn">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="singleTableRef" :data="tableData" highlight-current-row @current-change="handleCurrentChange">
      <el-table-column property="name" label="姓名" />
      <el-table-column property="phoneNo" label="电话号码" />
    </el-table>
    <div class="card_pagin">
      <el-pagination background layout="prev, pager, next, total" :total="total" :page-size="listForm.pageSize"
        @change="pageChangeFn" />
    </div>
  </el-dialog>
</template>

<script setup>
import { teacherList } from '~/server/api'
defineProps({
  teacherVisible: {
    type: Boolean,
    default: false
  }
})
// 列表
const listForm = ref({
  pageNum: 1,
  pageSize: 20,
  keyword: ''
})
const tableData = ref([])
const total = ref(0)
const getList = async () => {
  let { data: listRes } = await useAsyncData('teacherList', () => useServerRequest(teacherList, {
    method: 'post',
    body: JSON.stringify(listForm.value)
  }))
  if (listRes.value && listRes.value.errno === 0) {
    tableData.value = listRes.value.result.list;
    total.value = listRes.value.result.total;
  }
}
getList()
// 搜索
const searchFn = () => {
  listForm.value.pageNum = 1;
  getList()
}
// 分页
const pageChangeFn = (val) => {
  listForm.value.pageNum = val;
  getList()
}
// 选择
const emit = defineEmits(['teacherPick'])
const handleCurrentChange = (val) => {
  let obj = { visible: false };
  if (val) {
    obj = { visible: false, form: val };
  }
  emit('teacherPick', obj)
}
</script>

<style lang="less" scoped>
.card_pagin {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>